﻿/*****密码输入小键盘****/
var oksure = "";
(function (jQuery) {
    jQuery.fn.keyboard = function (options) {
        options = jQuery.extend({
            lang: 'en'
        }, options);
        var commonUrl = document.getElementById("__pre_url").value+"Content";
        var rand = options.name;
        var make = function () {
            var keyboard = '\
			<div class="keyboard_close"></div>\
			<div class="keyboard_norm keyboard_type en">\
				<table class="keyboard_row">\
					<tr>\
						<td ><span class="keyboard_key"><span class="keyboard_key-m">`</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">1</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">2</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">3</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">4</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">5</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">6</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">7</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">8</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">9</span></span></td>\
						<td name="downNum'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">0</span></span></td>\
						<td id="downNumTr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">-</span></span></td>\
						<td ><span class="keyboard_key"><span class="keyboard_key-m">=</span></span></td>\
						<td ><span class="keyboard_key backspace"><span class="keyboard_key-m">←</span></span></td>\
					</tr>\
				</table>\
				<table class="keyboard_row">\
					<tr>\
						<td><span class="keyboard_key atmark"><span class="keyboard_key-m">@</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">q</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">w</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">e</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">r</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">t</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">y</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">u</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">i</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">o</span></span></td>\
						<td name="downWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">p</span></span></td>\
						<td id="downWord1Tr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">[</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">]</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">\\</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">“</span></span></td>\
					</tr>\
				</table>\
				<table class="keyboard_row">\
					<tr>\
						<td><span class="keyboard_key capslock"><span class="keyboard_key-m"><img src="'+ commonUrl + '/image/keyboard/capslock.png" alt="capslock"/></span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">a</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">s</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">d</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">f</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">g</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">h</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">j</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">k</span></span></td>\
						<td name="downWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">l</span></span></td>\
						<td id="downWord2Tr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">;</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">\'</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">!</span></span></td>\
						<td><span class="keyboard_key enter"><span class="keyboard_key-m"><img src="'+ commonUrl + '/image/keyboard/enter.png" alt="enter"/></span></span></td>\
					</tr>\
				</table>\
				<table class="keyboard_row">\
					<tr>\
						<td><span class="keyboard_key lshift"><span class="keyboard_key-m"><img src="'+ commonUrl + '/image/keyboard/shift.png" alt="shift"/></span></span></td>\
						<td name="downWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">z</span></span></td>\
						<td name="downWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">x</span></span></td>\
						<td name="downWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">c</span></span></td>\
						<td name="downWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">v</span></span></td>\
						<td name="downWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">b</span></span></td>\
						<td name="downWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">n</span></span></td>\
						<td name="downWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">m</span></span></td>\
						<td id="downWord3Tr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">,</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">.</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">:</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">/</span></span></td>\
						<td><span class="keyboard_key rshift"><span class="keyboard_key-m">shift</span></span></td>\
					</tr>\
				</table>\
			</div>\
			<div class="keyboard_caps keyboard_type en">\
				<table class="keyboard_row">\
					<tr>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">~</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">!</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">@</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">#</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">$</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">%</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">^</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">&</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">*</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">(</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">)</span></span></td>\
						<td name="upWord1'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">_</span></span></td>\
						<td id="upWord1Tr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">+</span></span></td>\
						<td ><span class="keyboard_key backspace"><span class="keyboard_key-m">←</span></span></td>\
					</tr>\
				</table>\
				<table class="keyboard_row">\
					<tr>\
						<td><span class="keyboard_key atmark"><span class="keyboard_key-m">@</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">Q</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">W</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">E</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">R</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">T</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">Y</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">U</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">I</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">O</span></span></td>\
						<td name="upWord2'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">P</span></span></td>\
						<td id="upWord2Tr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">{</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">}</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">|</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">”</span></span></td>\
					</tr>\
				</table>\
				<table class="keyboard_row">\
					<tr>\
						<td><span class="keyboard_key capslock"><span class="keyboard_key-m"><img src="'+ commonUrl + '/image/keyboard/capslock.png" alt="capslock"/></span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">A</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">S</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">D</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">F</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">G</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">H</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">J</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">K</span></span></td>\
						<td name="upWord3'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">L</span></span></td>\
						<td id="upWord3Tr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">:</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">"</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">?</span></span></td>\
						<td><span class="keyboard_key enter"><span class="keyboard_key-m"><img src="'+ commonUrl + '/image/keyboard/enter.png" alt="enter"/></span></span></td>\
					</tr>\
				</table>\
				<table class="keyboard_row">\
					<tr>\
						<td><span class="keyboard_key lshift"><span class="keyboard_key-m"><img src="'+ commonUrl + '/image/keyboard/shift.png" alt="shift"/></span></span></td>\
						<td name="upWord4'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">Z</span></span></td>\
						<td name="upWord4'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">X</span></span></td>\
						<td name="upWord4'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">C</span></span></td>\
						<td name="upWord4'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">V</span></span></td>\
						<td name="upWord4'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">B</span></span></td>\
						<td name="upWord4'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">N</span></span></td>\
						<td name="upWord4'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m">M</span></span></td>\
						<td id="upWord4Tr'+ rand + '"><span class="keyboard_key"><span class="keyboard_key-m"><</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">></span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">;</span></span></td>\
						<td><span class="keyboard_key"><span class="keyboard_key-m">—</span></span></td>\
						<td><span class="keyboard_key rshift"><span class="keyboard_key-m"><img src="'+ commonUrl + '/image/keyboard/shift.png" alt="shift"/></span></span></td>\
					</tr>\
				</table>\
			</div>\
			<table class="keyboard_row">\
				<tr>\
					<td>\
						<div class="keyboard_lang" style="display:;">\
							<div class="keyboard_lang-i" style="display:none;">\
								<span class="b-dropdowna__switcher"></span>\
								<div class="keyboard_lang-selector">\
								</div>\
							</div>\
						</div>\
					</td>\
					<td><span class="keyboard_key space"><span class="keyboard_key-m"> </span></span></td>\
					<td><span class="keyboard_key determine" style="width:60px;">'+ oksure + '</span></td>\
					<td><span class="keyboard_key marked alt" rel="alt" style="display:none;"><span class="keyboard_key-m">? ? { } ~</span></span></td>\
				</tr>\
			</table>\
			';

            var $this = jQuery(this);
            var $ico = jQuery('<span class="keyboard_ico keyboard_ico' + rand + '"></span>');
            var $keyboard = jQuery('<div class="key_board key_board' + rand + '"></div>');

            $keyboard.html(keyboard);

            $this.after($ico);
            $this.after($keyboard);

            var capsMode = false;
            var shiftMode = false;
            var altMode = false;

            $keyboard.find('.keyboard_type').hide();
            $keyboard.find('.keyboard_norm' + '.' + options.lang).show();

            $keyboard.find('.b-dropdowna__switcher').html($keyboard.find('.b-menu__item[rel=' + options.lang + ']').html());

            $keyboard.mousedown(function () {
                return false;
            });

            $keyboard.on('mousedown', '.keyboard_key:not(.disabled)', function () {
                jQuery(this).addClass('pressed');

                if (jQuery(this).hasClass('backspace')) {
                    $this.val($this.val().substring(0, $this.val().length - 1));

                } else if (jQuery(this).hasClass('rshift') || jQuery(this).hasClass('lshift')) {
                    $keyboard.find('.keyboard_type').hide();
                    if (capsMode) {
                        $keyboard.find('.rshift, .lshift, .capslock').removeClass('suppressed');
                        capsMode = false;
                        shiftMode = false;
                        $keyboard.find('.keyboard_norm' + '.' + options.lang).show();
                    } else {
                        $keyboard.find('.rshift, .lshift').addClass('suppressed');
                        capsMode = true;
                        shiftMode = true;
                        $keyboard.find('.keyboard_key[rel]').removeClass('suppressed');
                        altMode = false;
                        $keyboard.find('.keyboard_caps' + '.' + options.lang).show();
                    }

                } else if (jQuery(this).hasClass('capslock')) {
                    $keyboard.find('.keyboard_type').hide();
                    if (capsMode) {
                        $keyboard.find('.rshift, .lshift, .capslock').removeClass('suppressed');
                        capsMode = false;
                        shiftMode = false;
                        $keyboard.find('.keyboard_norm' + '.' + options.lang).show();
                    } else {
                        $keyboard.find('.capslock').addClass('suppressed');
                        capsMode = true;
                        $keyboard.find('.keyboard_key[rel]').removeClass('suppressed');
                        altMode = false;
                        $keyboard.find('.keyboard_caps' + '.' + options.lang).show();
                    }

                } else if (jQuery(this).hasClass('enter')) {
                    $this.closest('form').submit();

                } else if (jQuery(this).hasClass('marked')) {
                    $keyboard.find('.keyboard_type').hide();
                    if (altMode == jQuery(this).attr('rel')) {
                        $keyboard.find('.keyboard_key[rel]').removeClass('suppressed');
                        altMode = false;
                        $keyboard.find('.keyboard_norm' + '.' + options.lang).show();
                    } else {
                        $keyboard.find('.keyboard_key[rel]').removeClass('suppressed');
                        $keyboard.find('.keyboard_key[rel=' + jQuery(this).attr('rel') + ']').addClass('suppressed');
                        altMode = jQuery(this).attr('rel');

                        $keyboard.find('.capslock').removeClass('suppressed');
                        capsMode = false;
                        $keyboard.find('.keyboard_type[rel=' + $(this).attr('rel') + ']').show();
                    }

                } else {
                    $this.val($this.val() + jQuery(this).find('.keyboard_key-m').text());
                }
                return false;
            });

            $keyboard.on('mouseup', '.keyboard_key', function () {
                $keyboard.find('.keyboard_key').removeClass('pressed');
                $this.focus();

                if (shiftMode && !jQuery(this).hasClass('rshift') && !jQuery(this).hasClass('lshift') && !altMode) {
                    $keyboard.find('.keyboard_type').hide();
                    $keyboard.find('.rshift, .lshift, .capslock').removeClass('suppressed');
                    capsMode = false;
                    shiftMode = false;
                    $keyboard.find('.keyboard_norm' + '.' + options.lang).show();
                }
            });

            $keyboard.on('click', '.b-dropdowna__switcher', function (e) {
                e.stopPropagation();
                $keyboard.find('.keyboard_lang-selector').fadeIn(100);
            });

            $ico.click(function () {
                //小写数字
                randomNum('downNum' + rand, 'downNumTr' + rand);
                //小写字母第一行
                randomNum('downWord1' + rand, 'downWord1Tr' + rand);
                //小写字母第二行
                randomNum('downWord2' + rand, 'downWord2Tr' + rand);
                //小写字母第三行
                randomNum('downWord3' + rand, 'downWord3Tr' + rand);
                //大写数字
                randomNum('upWord1' + rand, 'upWord1Tr' + rand);
                //大写字母第一行
                randomNum('upWord2' + rand, 'upWord2Tr' + rand);
                //大写字母第二行
                randomNum('upWord3' + rand, 'upWord3Tr' + rand);
                //大写字母第三行
                randomNum('upWord4' + rand, 'upWord4Tr' + rand);

                $keyboard.fadeToggle(0);
                $ico.toggleClass('active');
            });

            $keyboard.find('.keyboard_close').click(function () {
                $keyboard.fadeOut(0);
                $ico.removeClass('active');
            });

            $keyboard.find('.determine').click(function () {
                $keyboard.fadeOut(0);
                $ico.removeClass('active');
            });

            $keyboard.on('click', '.b-menu__item', function () {
                options.lang = $(this).attr('rel');

                capsMode = false;
                shiftMode = false;
                altMode = false;
                $keyboard.find('.rshift, .lshift, .capslock, .alt').removeClass('suppressed');

                $keyboard.find('.keyboard_type').hide();
                $keyboard.find('.keyboard_norm' + '.' + options.lang).show();

                $keyboard.find('.b-dropdowna__switcher').html($(this).html());
                $keyboard.find('.keyboard_lang-selector').hide();
            });

            function randomNum(name, tr) {
                var arr = jQuery("td[name=" + name + "]").toArray();
                var len = arr.length;
                var rands = parseInt(Math.random() * (len));
                jQuery('td[name=' + name + ']').each(function (i) {
                    jQuery('td[name=' + name + ']').eq(rands).insertBefore(jQuery('#' + tr));
                    rands = parseInt(Math.random() * (len));
                });
            }

        };
        return this.each(make);
    };
})(jQuery);